<template lang="html">
  <div class="password">
    <v-toolbar absolute>
      <v-btn icon @click="goback">
        <v-icon>fa-arrow-left</v-icon>
      </v-btn>

      <v-toolbar-title v-html="title"></v-toolbar-title>

      <v-spacer></v-spacer>

      <a v-html="addText" @click="goback"></a>
    </v-toolbar>

    <v-container class="v-password" :style="{height: height}">
      <v-layout wrap>
        <v-flex xs12>
          <v-text-field
            label="旧密码"
            v-model="oldPassword"
            placeholder="请输入"
            type="password"
          ></v-text-field>
          <v-text-field
            label="新密码"
            v-model="newPassword"
            placeholder="请输入"
            type="password"
          ></v-text-field>
          <v-text-field
            label="再次输入新密码"
            v-model="confirmPassword"
            placeholder="请输入"
            type="password"
          ></v-text-field>
        </v-flex>
        <v-btn class="submit" color="primary" @click="submit">提交</v-btn>
      </v-layout>
    </v-container>

    <v-bottom-nav
      :active.sync="bottomNav"
      :value="true"
      absolute
      color="transparent">
      <router-link class="tab-link" v-for="tab, index in tabsButton" :to="{ path: tab.url, params: {} }" @click.native="changeTitle(tab.text)">
        <v-btn color="#006cc6" flat :value="index">
          <span>{{tab.text}}</span>
          <v-icon>{{tab.icon}}</v-icon>
        </v-btn>
      </router-link>
    </v-bottom-nav>
  </div>
</template>

<script>
import {auth, invoke, entityList} from "@/api"
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      height: "0px",
      title: "修改密码",
      addText: "取消",
      tabsButton: [
        {text: "主页", icon: "fa-home", url: "/homepage"},
        {text: "个人中心", icon: "fa-user", url: "/profile"}
      ],
      bottomNav: 0,
      areaDataJson: [],
      managementDataJson: [],
      oldPassword: "",
      newPassword: "",
      confirmPassword: "",
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted() {
    this.resize()
    this.setData()
    this.loadAreaData()
    this.loadManagementData()
  },
  methods: {
    resize() {
      let windowHeight = window.getComputedStyle(document.querySelector('body')).height
      this.height = Number(windowHeight.replace('px', '')) - 56 - 56 + 'px'
    },
    setData() {
      if (this.$route.query.FId) {
        this.dataJson.FEquipment = this.$route.query.FCode
      }
    },
    loadAreaData() {
      entityList.getListDataByPost("WDM.Area.List", {
        unitCode: "WDM.Area",
        listId: "8a8ff08c-d49f-4ec4-9ab2-997fdc53bece",
        unitId: "276892d9-dbb1-4ef6-87b9-f463184d3360",
        employeeId: this.userInfo.id,
        keyword: this.areaSearch
        // pageCode: vm.$route.query.pageCode + ".List"
      }).then((res) => {
        this.areaDataJson = []
        this.areaDataJson = res.data.records
      })
    },
    loadManagementData() {
      entityList.getListDataByPost("WDM.PeopleManagement.SelectList", {
        unitCode: "WDM.PeopleManagement",
        listId: "59cfbaa7-9350-4e51-841e-e406371682ee",
        unitId: "08128467-2749-461b-b800-9d33995195a7",
        employeeId: this.userInfo.id,
        keyword: this.managementSearch
        // pageCode: this.$route.query.pageCode + ".List"
      }).then((res) => {
        this.managementDataJson = []
        this.managementDataJson = res.data.records
      })
    },
    goback() {
      this.$router.go(-1)
    },
    changeTitle(title) {
      this.title = title
    },
    checkChangePsd () {
      // 修改密码的逻辑检验
      let newPsdLen = this.newPassword.trim().length
      if (_.isEmpty(String(this.oldPassword))) {
        this.$toast.center('旧密码不能为空!')
        return false
      } else if (_.isEmpty(String(this.newPassword))) {
        this.$toast.center('新密码不能为空!')
        return false
      } else if (_.isEmpty(String(this.confirmPassword))) {
        this.$toast.center('确认密码不能为空!')
        return false
      } else if (this.newPassword !== this.confirmPassword) {
        this.$toast.center('新密码与确认密码不一致!')
        return false
      } else if (newPsdLen < 8 || newPsdLen > 16) {
        this.$toast.center('新密码长度需在8-16位!')
        this.newPassword = ''
        return false
      } else {
        return true
      }
    },
    submit() {
      if (!this.checkChangePsd()) { return }
      let args = {
        LoginName: '',
        OldPassword: '',
        NewPassword: ''
      }
      args.LoginName = this.userInfo.loginName
      args.OldPassword = this.oldPassword
      args.NewPassword = this.newPassword
      invoke('api/Ecp.OnlineUser.ModifyPassWord', args).then((res) => {
        if (res.success === true) {
          this.$toast('密码修改成功!')
          this.passwordPopup = false
          localStorage.setItem('remember', 'false')
          localStorage.setItem('autologin', 'false')
          localStorage.setItem('loginName', '')
          localStorage.setItem('password', '')
          setTimeout(() => {
            auth.logout()
          }, 500)
        }
      }).catch((err) => {
        this.$toast(err.msg)
      })
    }
  }
}
</script>

<style lang="scss">
.password {
  height: 100%;
  position: relative;


  .v-bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    .tab-link {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 50%;
    }
  }

  .v-password {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 0 !important;
    }

    span {
      color: rgb(199, 199, 204) !important;
    }

    i {
      font-size: 14px;
      margin-left: 10px;
      color: rgb(199, 199, 204) !important;
    }
  }

  .submit {
    width: 250px;
    margin: 10px auto;
  }
}
</style>
